<template>
  <div class="body1">
    <div class="nav">
      <h2>书城后台管理系统</h2>
    </div>
    <div class="content">
      <div class="listbook">
        <router-link to="/book" class="book"><h4>图书管理</h4></router-link>
        <router-link to="/user" class="user"><h4>用户管理</h4></router-link>
      </div>
      <div class="view">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 全局样式，设置 html 和 body 的高度 */
html, body {
  height: 100%;
  margin: 0;
}

.body1 {
  min-height: 100vh; /* 最小高度为视口高度 */
  display: flex;
  flex-direction: column;
}

.nav {
  background-color: black;
  padding: 0 20px; /* 添加内边距 */
}

h2 {
  color: aliceblue;
  height: 60px;
  line-height: 60px;
  margin: 0; /* 移除默认的外边距 */
}

.content {
  display: flex;
  flex: 1; /* 占据剩余的空间 */
}

.listbook {
  flex: 0 0 200px; /* 固定宽度为 200px */
  padding: 20px;
  background-color: #f4f4f4;
}

.listbook a {
  display: block;
  margin-bottom: 10px;
}

.view {
  flex: 1; /* 占据剩余的空间 */
  padding: 20px;
}

.book, .user {
  color: black;
  text-decoration: none;
}

/* 媒体查询，当屏幕宽度小于 768px 时应用以下样式 */
@media (max-width: 768px) {
  .content {
    flex-direction: column; /* 改为垂直布局 */
  }

  .listbook {
    flex: 0 0 auto; /* 宽度自适应 */
  }
}
</style>
